<template>
  <el-drawer v-model="drawerProps.drawerVisible" :destroy-on-close="true" size="80%" :title="drawerProps.title">
    <div>
      <div class="search-box">
        <el-form>
          <el-form-item
            label=" 推荐时段搜索："
            style="padding-bottom: 10px; margin: 0; border-bottom: 1px solid var(--el-aside-border-color)"
          >
            <el-radio-group v-model="taskTime" @change="searchHandleByTime">
              <el-tooltip content="点击查询：每日不限制时间段的任务" placement="top">
                <el-radio-button label="每日不限制时间段" value="每日不限制时间段" />
              </el-tooltip>
              <el-tooltip content="点击查询：根据需求及老人情况自行决定执行的任务" placement="top">
                <el-radio-button label="根据需求老人情况" value="根据需求及老人情况" />
              </el-tooltip>
              <el-tooltip content="点击查询：建议实施时段是 04:00 - 12:00 的任务" placement="top">
                <el-radio-button label="上午时段建议任务" value="04:00-12:00" />
              </el-tooltip>
              <el-tooltip content="点击查询：建议实施时段是 10:00 - 15:00 的任务" placement="top">
                <el-radio-button label="中午时段建议任务" value="10:00-15:00" />
              </el-tooltip>
              <el-tooltip content="点击查询：建议实施时段是 13:00 - 17:00 的任务" placement="top">
                <el-radio-button label="下午时段建议任务" value="13:00-17:00" />
              </el-tooltip>
              <el-tooltip content="点击查询：建议实施时段是 17:00 - 23:59 的任务" placement="top">
                <el-radio-button label="晚上时段建议任务" value="17:00-23:59" />
              </el-tooltip>
              <el-tooltip content="点击查询：建议实施时段是 00:00 - 05:00 的任务" placement="top">
                <el-radio-button label="凌晨时段建议任务" value="00:00-05:00" />
              </el-tooltip>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="根据名称搜索：" style="padding-top: 10px; margin: 0">
            <el-input style="width: 200px; margin-right: 15px" v-model="taskName" placeholder="输入任务名称搜索" clearable />
            <el-button type="primary" icon="Filter" plain @click="searchHandleByName">按名称搜索</el-button>
            <el-button type="primary" icon="Refresh" plain @click="searchHandleReset">刷新照护项目列表</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="categorize-box" v-for="mc in careMissionCategorizeList" :key="mc.id">
        <div class="categorize-title">
          <el-badge v-if="mc.companyId != 1" :offset="[15, 5]" :value="'排序：' + mc.sort" class="item">
            <span>{{ mc.companyId == 1 ? "平台分类" : "自建分类" }}： {{ mc.name }}</span>
          </el-badge>
          <span v-else>{{ mc.companyId == 1 ? "平台分类" : "自建分类" }}： {{ mc.name }}</span>
        </div>
        <div class="categorize-content" style="width: 100%">
          <el-table border :data="mc.careMissions" style="width: 100%">
            <el-table-column prop="" label="建议实施时段" width="200" align="left">
              <template #default="scope">
                <div v-if="scope.row.isDailyMission">
                  每日：
                  <span v-if="scope.row.dailyMissionStartTime && scope.row.dailyMissionEndTime" style="font-weight: 700">
                    {{ scope.row.dailyMissionStartTime }} - {{ scope.row.dailyMissionEndTime }}
                  </span>
                  <span v-else> 不限制时间段 </span>
                </div>

                <span v-else> 根据需求及老人情况 </span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="勾选照护项目" width="350">
              <template #default="scope">
                <div class="name-column">
                  <el-checkbox v-model="scope.row.selected">
                    <span style="font-weight: 500">{{ scope.row.name }}</span>
                  </el-checkbox>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="dailyMissionExecutionCount" label="建议执行次数" width="130" align="left">
              <template #default="scope">
                <span v-if="scope.row.dailyMissionExecutionCount">{{ scope.row.dailyMissionExecutionCount }} 次</span>
                <span v-else> -- </span>
              </template>
            </el-table-column>
            <el-table-column prop="companyId" label="项目来源" width="100" align="center">
              <template #default="scope">
                <span v-if="scope.row.companyId == 1">
                  <el-tag type="success" effect="dark" size="small">平台推荐</el-tag>
                </span>
                <span v-else>
                  <el-tag type="primary" effect="dark" size="small">自建任务</el-tag>
                </span>
              </template>
            </el-table-column>

            <el-table-column prop="description" label="注意事项" />
          </el-table>
        </div>
      </div>
    </div>
    <template #footer>
      <el-button type="primary" @click="searchHandleReset" style="float: left" icon="Refresh">刷新照护项目列表</el-button>
      <el-button @click="drawerProps.drawerVisible = false" icon="Close">取消</el-button>
      <el-button type="primary" @click="handleConfirm" icon="Select">添加勾选项目</el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, onMounted, defineEmits } from "vue";
import { CareMission } from "@/api/interface";
import { getCareMissionCategorizeList } from "@/api/modules/care-mission-categorize";

const taskTime = ref("");
const taskName = ref("");

// 组件挂载时加载任务分类列表
onMounted(() => {
  loadMissionCategorizeList();
});

// 抽屉组件参数接口
interface DrawerProps {
  drawerVisible: boolean;
  title: string;
}

// 抽屉组件参数
const drawerProps = ref<DrawerProps>({
  drawerVisible: false,
  title: "选择照护项目"
});

// 接收父组件传过来的参数
const acceptParams = async (params: DrawerProps) => {
  drawerProps.value = params;
};

// 暴露方法给父组件调用
defineExpose({
  // 接收父组件传过来的参数
  acceptParams
});

// 照护项目分类列表
const careMissionCategorizeList = ref<CareMission.ResCareMissionCategorize[]>([]);
// 加载照护项目分类列表
const loadMissionCategorizeList = async () => {
  const res = await getCareMissionCategorizeList({
    includeMissions: true,
    selectPlatform: undefined,
    name: taskName.value,
    time: taskTime.value
  });

  // 初始化选中状态
  careMissionCategorizeList.value.forEach(mc => {
    mc.careMissions.forEach(m => {
      m.selected = false;
    });
  });
  careMissionCategorizeList.value = res.data || [];
};

// 确认选择照护项目
const emit = defineEmits<{
  (event: "change", payload: CareMission.ResCareMission[]): void;
}>();
// 确认选择照护项目
const handleConfirm = () => {
  let selectedMissions: CareMission.ResCareMission[] = [];
  careMissionCategorizeList.value.forEach(mc => {
    mc.careMissions.forEach(m => {
      if (m.selected) {
        selectedMissions.push(m);
        m.selected = false;
      }
    });
  });
  // 触发父组件事件，传递选中的照护项目
  emit("change", selectedMissions);
  // 关闭抽屉
  drawerProps.value.drawerVisible = false;
};

// 重置搜索条件
const searchHandleReset = async () => {
  taskName.value = "";
  taskTime.value = "";
  await loadMissionCategorizeList();
};

// 搜索照护项目按时间
const searchHandleByTime = async (value: any) => {
  taskTime.value = value;
  taskName.value = "";
  await loadMissionCategorizeList();
};

// 搜索照护项目按名称
const searchHandleByName = async () => {
  taskTime.value = "";
  await loadMissionCategorizeList();
};
</script>

<style scoped lang="scss">
.categorize-container {
  width: 100%;
}
.categorize-title {
  padding: 12px;
  font-size: 16px;
  font-weight: bold;
  background-color: var(--el-color-primary-light-9);
}
.top-box {
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid var(--el-aside-border-color);
  border-radius: 4px;
}
.categorize-box {
  margin-bottom: 15px;
  overflow: hidden;
  border: 1px solid var(--el-aside-border-color);
  border-radius: 4px;
}
.name-column .el-checkbox {
  height: auto;
}
.search-box {
  padding: 10px;
  margin-bottom: 15px;
  overflow: hidden;
  border: 1px solid var(--el-aside-border-color);
}
</style>
